<template>
	<view class="pd-select-item" @touchmove="itemTouchMove($event)" @touchstart="itemTouchStart($event)"
		@touchend="itemTouchEnd($event)">
		<div class="pd-select-line"></div>
		<div class="pd-select-list">
			<view class="pd-select-ul" ref="list" :style="setListDegStyle">
				<view class="pd-select-list-item" v-for="el,index in renderData "
					:class="{'hidden':setHidden(el.index)}" :key="index">
					{{(el.value == 100&&'今天')||(el.value == 101&&'明天')||(el.value == 102&&'后天')||`${(renderData.find(item=> [50,'00'].includes(item.value) ))? (el.value+'分'):(el.value+'点')}` }}
				</view>
			</view>
		</div>
		<view class="pd-select-wheel" ref="wheel" :style="setWheelDegStyle">
			<view class="pd-select-wheel-item" :class="{'hidden':setHidden(el.index)}"
				:style="[setWheelItemDeg(el.index)][0].transform" :index="el.index" v-for="el,index in renderData " :key="index">
				{{(el.value == 100&&'今天')||(el.value == 101&&'明天')||(el.value == 102&&'后天')||`${(renderData.find(item=> [50,'00'].includes(item.value) ))? (el.value+'分'):(el.value+'点')}` }}
			</view>
		</view>
	</view>
</template>
<script>
	import vibration from '../../libs/vibration.js'
	export default {
		name: 'pdSelectItem',
		data() {
			return {
				spin: {
					start: -9,
					end: 9,
					branch: 9
				},
				finger: {
					startY: 0,
					lastY: 0,
					startTime: 0,
					lastTime: 0,
					transformY: 0
				},
				setWheelDegStyle: {},
				setListDegStyle: {},
			}
		},
		props: {
			listData: {
				type: Array,
				required: true
			},
			type: {
				type: String,
				default: 'line'
			},
			isEndTomorrow: {
				type: Boolean,
				default: false
			},
			startOrEnd: {
				type: Boolean,
				default: false
			},
			value: {}
		},
		computed: {
			renderData() {
				let temp = []
				for (let k = this.spin.start; k <= this.spin.end; k++) {
					let data = {
						value: this.getSpinData(k),
						index: k
					}
					temp.push(data)
				}
				return temp
			}
		},
		mounted() {
			this.init()
			console.log(this.listData, '打印this.listData')
		},
		methods: {
			/* 初始化状态 */
			init(type) {
				let index, move
				this.$nextTick(() => {
					if (!type) {
						this.finger = {
							startY: 0,
							lastY: 0,
							startTime: 0,
							lastTime: 0,
							transformY: 0
						};
						let hh = this.isEndTomorrow && this.startOrEnd ? '次日 ' + this.value : this.value
						index = this.listData.indexOf(hh)
						if (index === -1) {
							this.setListTransform()
							this.getPickValue(0)
						} else {
							move = index * 34
							/* 因为往上滑动所以是负 */
							this.setStyle(-move)
							this.setListTransform(-move, -move)
						}
					}
				})
			},
			/* 根据type 控制滚轮显示效果 */
			setHidden(index) {
				if (this.type === 'line') {
					return index < 0 || index > this.listData.length - 1
				} else {
					return false
				}
			},
			setWheelItemDeg(index) {
				return {
					transform: `rotate3d(1, 0, 0, ${-index * 20 % 360}deg) translate3d(0px, 0px, 100px)`
				}
			},
			setWheelDeg(updateDeg, type, time = 1000) {
				if (type === 'end') {
					this.setWheelDegStyle = {
						transform: `rotate3d(1, 0, 0, ${updateDeg}deg)`,
						transition: `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`
					}
					// 	this.$refs.wheel.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`
					// 	this.$refs.wheel.style.webkitTransform = `rotate3d(1, 0, 0, ${updateDeg}deg)`
				} else {
					this.setWheelDegStyle = {
						transform: `rotate3d(1, 0, 0, ${updateDeg}deg)`,
						//transition:`transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`
					}
					// 	this.$refs.wheel.style.webkitTransition = ''
					// 	this.$refs.wheel.style.webkitTransform = `rotate3d(1, 0, 0, ${updateDeg}deg)`
				}
			},
			setListTransform(translateY = 0, marginTop = 0, type, time = 1000) {
				if (type === 'end') {
					this.setListDegStyle = {
						marginTop: `${-marginTop}px`,
						transform: `translateY(${translateY - this.spin.branch * 34}px)`,
						transition: `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`
					}
					// 	this.$refs.list.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`
					// 	this.$refs.list.style.webkitTransform = `translateY(${translateY - this.spin.branch * 34}px)`
					// 	this.$refs.list.style.marginTop = `${-marginTop}px`
					// this.$refs.list.setAttribute('scroll', translateY)
				} else {
					this.setListDegStyle = {
						marginTop: `${-marginTop}px`,
						transform: `translateY(${translateY - this.spin.branch * 34}px)`,
						// transition:`transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`
					}
					// 	this.$refs.list.style.webkitTransition = ''
					// 	this.$refs.list.style.webkitTransform = `translateY(${translateY - this.spin.branch * 34}px)`
					// 	this.$refs.list.style.marginTop = `${-marginTop}px`
					// this.$refs.list.setAttribute('scroll', translateY)
				}
			},
			itemTouchStart(event) {
				// 振动
				// vibration()
				let finger = event.changedTouches[0]
				this.finger.startY = finger.pageY
				this.finger.startTime = event.timestamp || Date.now()
				this.finger.transformY = parseInt(this.setListDegStyle.marginTop.slice(0, this.setListDegStyle.marginTop
					.length - 2)) * -1
				event.preventDefault()
			},
			itemTouchMove(event) {
				let finger = event.changedTouches[0]
				this.finger.lastY = finger.pageY
				this.finger.lastTime = event.timestamp || Date.now()
				/* 设置css */
				let move = this.finger.lastY - this.finger.startY
				this.setStyle(move)
				event.preventDefault()
			},
			itemTouchEnd(event) {
				let finger = event.changedTouches[0]
				this.finger.lastY = finger.pageY
				this.finger.lastTime = event.timestamp || Date.now()
				let move = this.finger.lastY - this.finger.startY
				/* 计算速度 */
				/* 速度计算说明
				 * 当时间小于300毫秒 最后的移动距离等于 move + 减速运动距离
				 * */
				let time = this.finger.lastTime - this.finger.startTime
				let v = move / time
				/* 减速加速度a */
				let a = 2
				/* 设置css */
				if (time <= 300) {
					move = v * a * time
					// time = 1000 + time * a
					this.setStyle(move, 'end')
				} else {
					this.setStyle(move, 'end')
				}
			},
			/* 设置css */
			setStyle(move, type, time) {
				const singleHeight = 34
				const deg = 20
				const singleDeg = deg / singleHeight
				let currentListMove = this.finger.transformY
				let updateMove = move + Number(currentListMove)
				let updateDeg, spinAim, margin, endMove, endDeg
				if (type === 'end' && this.type === 'line') {
					/*这里只在释放的时候判断 实现缓动效果*/
					/* 根据滚轮类型 line or cycle 判断 updateMove最大距离 */
					if (updateMove > 0) {
						updateMove = 0
					}
					if (updateMove < -(this.listData.length - 1) * singleHeight) {
						updateMove = -(this.listData.length - 1) * singleHeight
					}
				}
				//todo 这里考虑后续设置能最大缓动的值 目前暂时不考虑
				updateDeg = -updateMove * singleDeg
				spinAim = Math.round(updateDeg / 20)
				margin = Math.round(updateMove / singleHeight) * singleHeight // 如果不这么写 会导致没有滚动效果
				/* 计算touchEnd移动的整数距离 */
				endMove = margin
				endDeg = Math.round(updateDeg / deg) * deg
				if (type === 'end') {
					this.setListTransform(endMove, margin, type, time)
					this.setWheelDeg(endDeg, type, time)
					/* 设置$emit */
					this.getPickValue(endMove)
				} else {
					this.setListTransform(updateMove, margin)
					this.setWheelDeg(updateDeg)
				}
				this.updateSpin(spinAim)
			},
			/* 更新spin */
			updateSpin(spinAim) {
				this.spin.start = this.spin.branch * -1 + spinAim
				this.spin.end = this.spin.start + this.spin.branch * 2
			},
			/* 获取spin 数据 */
			getSpinData(index) {
				index = index % this.listData.length
				return this.listData[index >= 0 ? index : index + this.listData.length]
			},
			/* 获取选中值 */
			getPickValue(move) {
				let index = Math.round(-move / 34)
				let pickValue = this.getSpinData(index)
				this.$emit('input', pickValue)
			}
		},
		beforeDestroy() {}
	}
</script>
<style lang="scss" scoped="">
	html {
		font-family: 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', sans-serif;
		line-height: 1.8;
	}

	$color-background: #fff;
	$color-checked: #E4E4E4;
	$color-text-main: #333;
	$color-text-second: #a8a8a8;
	$color-backgrounds: #F1F1F5;

	.pd {
		&-select {
			&-item {
				overflow: hidden;
				width: 100%;
				text-align: center;
				height: 440rpx;
				background: $color-background;
				position: relative;

				& ul,
				li {
					padding: 0rpx;
					list-style: none;
					margin: 0rpx;
				}
			}

			&-ul {
				position: relative;
			}

			&-line,
			&-list,
			&-wheel {
				position: absolute;
				left: 0rpx;
				right: 0rpx;
				top: 186rpx;
			}

			&-line {
				z-index: 3;
			}

			&-list {
				z-index: 2;
				background: $color-backgrounds;
			}

			&-wheel {
				z-index: 1;
			}

			&-line {
				width: 694rpx;

				ba &:after,
				&:before {
					position: absolute;
					top: 0;
					content: '';
					display: table;
					width: 100%;
					transform-origin: 0rpx 0rpx;
				}

				&:before {
					top: auto;
				}
			}

			&-line,
			&-list {
				height: 68rpx;
				transform: translate3d(0rpx, 0rpx, 220rpx);
				padding: 5rpx 0rpx;
			}

			&-list {
				overflow: hidden;
			}

			&-list-item {
				font-size: 40rpx;
				font-weight: bold;
				color: #1A1A1A;
				text-shadow: 0 2rpx 2rpx rgba(102, 102, 102, 0.6);
			}

			&-list-item,
			&-wheel-item {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 68rpx;
				font-size: 36rpx;
				color: $color-text-main;

				&.hidden {
					visibility: hidden;
					opacity: 0;
				}
			}

			&-wheel {
				transform-style: preserve-3d;
				height: 68rpx;

				&-item {
					backface-visibility: hidden;
					position: absolute;
					top: 0;
					width: 100%;
					color: $color-text-second;
				}
			}
		}
	}
   	.pd-select-item { 
          width: 255rpx;
      }


         
         .pd-select-list {
         overflow: visible;
         }
         
         .pd-select-ul{
         position: absolute;
         left: 90rpx;
         height: 38rpx;
         }
         
         
         
         .pd-select-wheel{
         position: relative;
         top: -408rpx;
         }
         
         .pd-select-list-item{
         transform: translateY(-600rpx);
         }
         
         .pd-select-line{
         transform: translateY(195rpx);
        }
</style>